<template>
  <div class="p-main">
    <div id="main"></div>
    <div class="p-title">市场交易品种分析</div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import api from '../utils/api';

export default {
  data() {
    return {
      myChart: null,
      option: {},
    };
  },
  created() {},
  async mounted() {
    let chartDom = document.getElementById('main');
    this.myChart = echarts.init(chartDom);

    let colorArr = [
      'rgba(42, 232, 130, 1)',
      'rgba(255, 226, 0, 1)',
      'rgba(2, 119, 255, 1)',
      'rgba(255, 173, 217, 1)',
      'rgba(178, 111, 1, 1)',
      'rgba(135, 99, 233, 1)',
      'rgba(38, 98, 89, 1)',
    ];
    let data = [];
    await api.getJcsjGsJYPZByPFMarket().then((res) => {
      if (res.data.length > 0) {
        res.data.forEach((item) => {
          data.push({
            name: item.name,
            value: item.bfb,
          });
        });
      }
    });

    let arrName = getArrayValue(data, 'name');
    let arrValue = getArrayValue(data, 'value');
    let sumValue = eval(arrValue.join('+'));
    let objData = array2obj(data, 'name');
    let optionData = getData(data);
    function getArrayValue(array, key) {
      var key = key || 'value';
      var res = [];
      if (array) {
        array.forEach(function(t) {
          res.push(t[key]);
        });
      }
      return res;
    }

    function array2obj(array, key) {
      var resObj = {};
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i];
      }
      return resObj;
    }

    function getData(data) {
      var res = {
        series: [],
        yAxis: [],
      };
      for (let i = 0; i < data.length; i++) {
        res.series.push({
          name: '',
          left: '25%',
          top: '-30%',
          type: 'pie',
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [83 - i * 10 + '%', 80 - i * 10 + '%'],
          center: ['30%', '55%'],
          label: {
            show: false,
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            borderWidth: 5,
          },
          data: [
            {
              value: data[i].value > 80 ? data[i].value - 25 : data[i].value,
              name: data[i].name,
            },
            {
              value: 125 - data[i].value,
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        });
        res.series.push({
          name: '',
          left: '25%',
          top: '-30%',
          type: 'pie',
          silent: true,
          z: 1,
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [83 - i * 10 + '%', 80 - i * 10 + '%'],
          center: ['30%', '55%'],
          label: {
            show: false,
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            borderWidth: 5,
          },
          data: [
            {
              value: 7.5,
              itemStyle: {
                color: 'rgba(25,46,84, .7)',
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
            {
              value: 2.5,
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        });
      }
      return res;
    }

    let option = {
      legend: {
        show: true,
        left: 'center',
        bottom: 10,
        data: arrName,
        itemWidth: 8,
        itemHeight: 8,
        icon: 'circle',
        width: 250,
        padding: [0, 5],
        itemGap: 5,
        formatter: function(name) {
          return '{title|' + name + '}{value|' + objData[name].value + '%}';
        },
        textStyle: {
          rich: {
            title: {
              fontSize: 14,
              width: 45,
              lineHeight: 14,
              color: '#fff',
            },
            value: {
              fontSize: 14,
              width: 45,
              lineHeight: 14,
              color: '#fff',
            },
          },
        },
      },
      tooltip: {
        show: false,
        trigger: 'item',
        formatter: '{a}<br>{b}:{c}({d}%)',
      },
      // color: colorArr,
      yAxis: [
        {
          type: 'category',
          inverse: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            inside: true,
            textStyle: {
              color: '#000',
              fontSize: 10,
            },
            show: true,
          },
          data: optionData.yAxis,
        },
      ],
      xAxis: [
        {
          show: false,
        },
      ],
      series: optionData.series,
    };

    this.myChart.setOption(option);
    window.addEventListener('resize', () => {
      this.myChart.resize();
    });
  },
};
</script>

<style lang="less" scoped>
.p-main {
  width: 100%;
  height: 100%;
  position: relative;
  .p-title {
    position: absolute;
    top: 10px;
    left: 23px;
    font-size: 14px;
    color: #fff;
  }
}
#main {
  width: 100%;
  height: 100%;
}
</style>
